<template>
	<view class="pageview">
		<zx-nav title=" " noBack bg="transparent" color="#fff"></zx-nav>
		<view class="top-wrap"></view>
		<!-- 个人信息 -->
		<div class="userinfo u-flex-y-center" @tap="showDetails">
			<u-avatar :size="100"></u-avatar>
			<view class="u-m-l-22 u-flex-sub">
				<view class="name">{{ userInfo.username }}</view>
				<!-- <view class="account">{{ userInfo.username || '13720247591' }}</view> -->
			</view>
			<u-icon name="arrow-right"></u-icon>
		</div>
		<view class="cardbox">
			<u-grid :col="4" :border="false">
				<u-grid-item @tap="navTo(item.path)" v-for="(item, index) in showMenulist" :key="index"
					:customStyle="{ height: 160 + 'rpx' }">
					<view class="imgbox">
						<image :src="item.icon" class="png" mode="widthFix"></image>
					</view>
					<text class="grid-text">{{ item.name }}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="menu cardbox">
			<view class="menu-item u-flex u-flex-between u-flex-y-center" v-for="(item, index) in menulist" :key="index"
				@tap="navTo(item.path)">
				<image :src="item.icon" mode="widthFix" class="icon"></image>
				<view class="flex-sub name">{{ item.name }}</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import mixin from '@/common/mixin.js';
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	export default {
		mixins: [mixin],
		data() {
			return {
				curIndex: 0,
				menulist: [{
						name: '健康记录',
						icon: '/static/mine/icon5.png',
						path: ''
					},
					{
						name: '健康报告',
						icon: '/static/mine/icon6.png',
						path: '/pages/forgetpwd/forgetpwd'
					},
					{
						name: '使用指南',
						icon: '/static/mine/icon7.png',
						path: ''
					},
					{
						name: '设置',
						icon: '/static/mine/icon8.png',
						path: '/pages/setting/setting'
					}
				],
				gridlist: [{
						name: '扫一扫',
						icon: '/static/mine/icon1.png',
						path: ''
					},
					{
						name: '二维码名片',
						icon: '/static/mine/icon2.png',
						path: '/pages/forgetpwd/forgetpwd'
					},
					{
						name: '家庭成员',
						icon: '/static/mine/icon3.png',
						path: '/pages/account/account'
					},
					{
						name: '消息',
						icon: '/static/mine/icon4.png',
						path: '/pages/stuList/stuList'
					}
				]
			};
		},
		components: {

		},
		computed: {
			...mapState(['userInfo']),
			showMenulist() {
				return this.gridlist;
			}
		},
		onShow() {},

		methods: {
			...mapActions(['Logout']),
			...mapMutations(['$uStore']),
			navTo(path, type) {
				if (path) {
					this.$Router.push({
						path
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	.pageview {
		height: 100vh;
		background: #f7f7fc;

		&>view {
			position: relative;
		}

		.top-wrap {
			background: linear-gradient(180deg, #e1faf7 0%, #f7f7fc 79%);
			position: absolute;
			left: 0;
			width: 100%;
			height: 750upx;
			top: 0;
		}

		.userinfo {
			color: #1c2023;
			font-size: 24upx;
			z-index: 999;
			margin: 50upx 30upx 0;
			position: relative;

			.name {
				font-size: 32upx;
				margin-right: 10upx;
				font-weight: 600;
			}

			.account {
				font-size: 28upx;
				margin-top: 10upx;
				color: #36374d;
			}
		}

		.cardbox {
			margin: 30upx;
			padding: 22upx 0;
			background: #fff;
			box-shadow: 0px 20upx 60upx rgba(0, 87, 84, 0.05);
			border-radius: 10upx;

			.imgbox {
				width: 92upx;
				height: 92upx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			.grid-text {
				font-size: 28upx;
				font-weight: 400;
				line-height: 34px;
				color: #1b0a1c;
				// padding: 14rpx 0 20rpx 0rpx;
				/* #ifndef APP-PLUS */
				box-sizing: border-box;
				/* #endif */
			}

			.num {
				display: inline-block;
				color: #fff;
				font-size: 24upx;
				background: #fb706c;
				border-radius: 20upx;
				padding: 0 14upx;
				height: 34upx;
				position: absolute;
				top: -10px;
				right: -10px;
			}
		}

		.menu {
			padding: 0 20rpx;

			.menu-item {
				padding: 32upx 0 32upx 12upx;
				font-size: 30upx;
				color: #1c2023;

				.icon {
					width: 40upx;
					height: 40upx;
					display: block;
					margin-right: 16upx;
				}

				&+.menu-item {
					border-top: 1px solid #e3e4e5;
				}
			}
		}
	}
</style>